<template>
	<scroll-view class="center">
		<view class="header">
			<view class="image">
				<image src="https://z3.ax1x.com/2021/04/12/cDhi9J.png"></image>
				<text>共有{{goodlist.length}}件宝贝</text>
			</view>
			<view class="text">管理</view>
		</view>
		<!-- 购物车列表 -->
		<view class="header-center" v-for="(item,index) in goodlist" :key="item.productId">
			<navigator  class="goodlist">
				<!-- 左边 -->
				<view class="center-left">
					<radio color="#ff7417" :checked="item.productStatus==0"  @click="radioChange(item.productId)"></radio>
				</view>
				<view class="center-center1">
					<image :src="item.productImage"></image>
				</view>
				<!-- 右边 -->
				<view class="center-right">
					<view>{{item.productName}}</view>
					<view>{{item.productDetail}}</view>
					<view>
						<view class="text">￥{{item.productSeckill*item.productCollectnum}}</view>
						<view class="add">
							<button  hover-class="none"  type="default"  size="mini" @click="number(-1,index)" :disabled="item.productCollectnum==1"><text>-</text> </button>
							<text> {{item.productCollectnum}}</text>
							<button  size="mini" @click="number(1,index)"><text>+</text></button> 			
						</view>
					</view>
				</view>
			</navigator>
		</view>
		
		<!-- 固定定位 -->
		<view class="location">
			<view class="bottom">
				<view class="pay1">
					<radio color="#ff7417" :checked="Status==0" @click="getPrice(Status)"></radio>
					<text>全选</text>
				</view>
				<view class="pay2">
					<text >合计：</text>
					<text>￥{{getTotalPrice}}</text>
					<navigator  @click="tiaozhuan"  open-type="navigate">
						<text>结算</text>
					</navigator>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				goodlist:[
				],
				Allprice:'',
				Status:"1",
			};
		},
		onLoad() {
			const val= uni.getStorageSync("shoppingCart")
			// console.log(" 购物车",val );
			this.goodlist=val
		},
		computed:{
			getTotalPrice(){
				let newArr=this.goodlist.filter((item)=>{
					return item.productStatus==0
				})
				return newArr.reduce((acc,cur)=>{
					return acc+cur.productSeckill*cur.productCollectnum
				},0)
			}
		},
		methods:{
			//单个单击购买
			radioChange(e){
			const val= this.goodlist.filter((item)=>item.productId==e)
				if(!val[0].productStatus){
					val[0].productStatus=1
					this.Status=1
				}else{
					val[0].productStatus=0
					//通过状态判断是否改变全选按钮
					const newVal=this.goodlist.filter((item)=>{
						 return	item.productStatus==0
					})
					// console.log(newVal.length,this.goodlist.length);
					if(newVal.length==this.goodlist.length){
						// console.log(0);
						this.Status=0
					}else{
						// console.log(1);
						this.Status=1
					}
				}
				
			},
			
	
			//点击全选
			getPrice(e){
				if(!e){
					this.Status=1
					this.goodlist.forEach((item)=>{
						return item.productStatus=1
					})
				}else{
					this.Status=0
					this.goodlist.forEach((item)=>{
						return item.productStatus=0
					})
					
				}
			},
			//点击增加或减少数量
			number(n,index){
				  // console.log(n,index);
				this.goodlist[index].productCollectnum+=n
				
			},
			//跳转
			tiaozhuan(){
				if(!this.getTotalPrice){
					uni.showToast({
						icon:'none',
						title:'请勾选商品'
					})
				}else{
					let array=this.goodlist.filter(item=>{
						return item.productStatus==0
					})
					 //添加到待支付页面商品列表
					array.forEach(item=>{
						let e=item
						const val = uni.getStorageSync("paygoodlist")
						if (!val) {
							uni.setStorageSync("paygoodlist", [e])
						} else {
							const arr1 = val.some((item, index) => {
								return item.productId == e.productId
							})
							if (!arr1) {
								uni.setStorageSync("paygoodlist", [e, ...val])
							} else {
								const arr2 = val.map((item) => {
									if (item.productId == e.productId) {
										item.productCollectnum += 1
									}
									return item
								})
								uni.setStorageSync("paygoodlist", [...arr2])
							}
						}
					})
					
					//删除购物车中待支付的商品
					uni.removeStorageSync('shoppingCart')
					let newarray=this.goodlist.filter(item=>{
						return item.productStatus==1
					})
					uni.setStorageSync('shoppingCart',newarray)
					
					
					uni.navigateTo({
						url:'../mall-payment/mall-payment'
					})
				}
			},
			
		
			
		}
		
	}
</script>

<style lang="scss">
	.center{
		background-color: #eeedf1;
		
		.header{
			padding: 10rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.image{
				display: flex;
				align-items: center;
				image{
					width: 80rpx;
					height: 80rpx;
				}
				text{
					color: #ff7417;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
				
			}
			.text{
				font-size: 32rpx;
				color: #ff7417;
				font-weight: bold;
			}
			
		}
		.header-center{
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			.goodlist{
				background-color: #FFFFFF;
				display: flex;
				border-radius: 25rpx;
				border-bottom:1rpx solid #ebe6e6 ;
				.center-left{
					width: 8%;
					display: flex;
					align-items: center;
					text-align: center;
					transform: scale(0.8);
				}
				.center-center1{
					text-align: center;
					align-items: center;
					width: 32%;
					image{
						margin-top: 50rpx;
						width: 150rpx;
						height: 150rpx;
					}
				}
				.center-right{
					width: 60%;
					view{
						margin: 20rpx;
						&:nth-of-type(1){
							color: #333333;
							font-weight: 550;
						}
						&:nth-of-type(2){
							color: #808080;
							font-size: 28rpx;
							width: 400rpx;
							overflow: hidden;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							
						}
						&:nth-of-type(3){
							display: flex;
							justify-content: space-between;
							.text{
								color: #ff7417;
								font-weight: 550;
							}
							.add{
								border-radius: 10rpx;
								font-size: 28rpx;
								color: #969696;
								border: 1rpx solid #C0C0C0;
								display: flex;
								align-items: center;
								height: 40rpx;
								button::after{
									border: none;
									background-color: none;
								}
							}
						}
					}
					
					
				}
			}
			
		}
		
		.location{
				width: 100vw;
				height: 120rpx;
				box-sizing: border-box;
				padding: 20rpx;
				background-color: #ffffff;
				position: fixed;
				border-radius: 10rpx;
				bottom: 0rpx;
				left: 0rpx;
				.bottom{
					width:100%;
					display: flex;
					justify-content: space-around;
					.pay1{
						width: 40%;
						// border: 1rpx solid red;
						display: flex;
						align-items: center;
						radio{
							transform: scale(0.6);
						}
						text{
							font-size: 28rpx;
							color: #999999;
						}
					}
					.pay2{
						// border: 1rpx solid red;
						display: flex;
						align-items: center;
						justify-content: space-between;
						text-align: right;
						text{
							&:nth-of-type(1){
								font-size: 28rpx;
							}
							&:nth-of-type(2){
								font-size: 20rpx;
								color: #ff700a;
								font-weight: bold;
								margin-right: 20rpx;
							}
						}
						navigator{
							text{
								text-align: center;
								color: #FFFFFF;
								border: 1rpx solid #ff700a;
								display: inline-block;
								width: 200rpx;
								height: 80rpx;
								border-radius: 50rpx;
								background-color: #ff700a;
								line-height: 80rpx;
								opacity: 0.8;
							}
						}
					}
			
				}
				
					
		}
		
	}


</style>
